<script>
import axios from "axios";

export default {
  name: "CompanyComponent",
  data() {
    return {
      //表格展示数据
      tableData: [],
      //分页数据
      page:{
        currentPage: 1,
        pageSize: 10,
        total:0
      },
      //搜索框数据
      input:null,
      //模式 0编辑  1新增
      mode:1,
      //对话框弹出隐藏
      dialogVisible: false,
      //对话框数据
      form: {
        id:'',//主键
        name: '',//公司名
        address: '',//地址
        telephone: '',//电话
        simplyintroduce: '',//简介
        email: '',//邮件
        twopicture: '',//二维码
        picture: ''//照片
      },
      //行数据
      row:''

    }
  },
  methods: {
    //编辑按钮
    handleEdit(index, row) {
      // console.log(index, row);
      // console.log(row);
      this.mode=0;
      //数据回显
      this.form= {...row};
      this.dialogVisible=true;
    },
    //编辑请求
    edit(){
      axios.put("/company",this.form).then(res=>{
        //请求成功，关闭对话框
        this.dialogVisible = false;
        //清除对话框数据
        this.clearDialog();
        //刷新列表
        this.init();
      }).catch(err=>{})
    },
    //删除按钮附带删除请求
    handleDelete(index, row) {
      // console.log(index, row);
      axios.delete("/company/"+row.id).then(res=>{
        this.init();
      }).catch(err=>{});
    },
    //点击页码改变页码
    currentChange(pageNum){
      this.page.currentPage=pageNum;
      this.init();
    },
    //点击上一页
    preClick(pageNum){
      // console.log(pageNum);
    this.page.currentPage=pageNum;
    this.init();
    },
    //点击下一页
    nextClick(pageNum){
      this.page.currentPage=pageNum;
      this.init();
    },
    //搜索
    search(){
      axios.get("/company/search",{
        params:{
          name:(this.input!=null||this.input==='')?this.input:null,
        }
      }).then((response)=>{
        console.log(response);
        this.tableData = response.data.data.companies;
        this.page.total=response.data.data.total;
      }).catch(err=>{ console.log(err);})
    },
    //对话框关闭之前
    handleClose(done) {
      // console.log("要关闭了");
      this.dialogVisible=false;
      this.clearDialog();

      // done();
    },
    //新增按钮
    addCompany(){
      this.dialogVisible = true;
      this.mode=1;
    },
    //上传图片成功方法
    onSuccess(res,file){
      // console.log("上传成功")
      // console.log(res);
      // console.log(file);
      //后端的图片网络地址传过来
      this.form.picture = res.data;
    },
    //二维码图片上传
    onSuccess2(res,file){
      this.form.twopicture=res.data;
    },
    //确认对话框
    confirmDialog(){
      this.dialogVisible = false;
      // console.log(this.form)
      if (this.mode===1){
        //新增操作
        this.add();
      }else if (this.mode===0){
        //修改操作
        this.edit();
      }

    },
    //取消对话框
    cancelDialog(){
      this.dialogVisible = false;
      this.clearDialog();
    },
    //新增按钮的请求插入数据
    add(){
      axios.post("/company",this.form).then((response)=>{
        //请求成功，关闭对话框
        this.dialogVisible = false;
        //清除对话框数据
        this.clearDialog();
        //刷新列表
        this.init();
      }).catch(err=>{ console.log(err);})
    },

    //清空对话框
    clearDialog(){
      this.form.name='';
      this.form.address='';
      this.form.telephone='';
      this.form.simplyintroduce='';
      this.form.email='';
      this.form.twopicture='';
      this.form.picture='';
    },


    //初始化请求
    init(){
      axios.get("/company",{
        params:{
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
        }
      }).then((response)=>{
        // console.log(response);
        this.tableData = response.data.data.companies;
        this.page.total=response.data.data.total;
      }).catch((error)=>{})
    }

  },
  //初始化生命函数
  created() {
    this.init();
  }

}
</script>

<template>
  <div class="container">
    <div class="header">
      <div class="search">
        <el-input v-model="input" placeholder="请输入公司名称"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
      <div class="insert">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addCompany">新增</el-button>
      </div>
    </div>
    <div class="table">
      <el-table
          :data="tableData"
          style="width: 100%"
          :cell-style="{'text-align':'center'}"
          :header-cell-style="{background: '#1890ff',color: '#ffffff','text-align': 'center'}">
        <el-table-column
            prop="id"
            label="id"
            width="100">
        </el-table-column>
        <el-table-column
            prop="picture"
            label="照片"
            width="180">
          <template slot-scope="scope">
            <img :src="scope.row.picture" alt="" style="width: 70px">
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="公司名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
            width="180">
        </el-table-column>
        <el-table-column
            prop="telephone"
            label="电话"
            width="150">
        </el-table-column>
        <el-table-column
            prop="simplyintroduce"
            label="简介"
            width="150">
        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱"
            width="150">
        </el-table-column>
        <el-table-column
            prop="twopicture"
            label="二维码"
            width="150">
          <template slot-scope="scope">
            <img :src="scope.row.twopicture" alt="" style="width: 70px">
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="150">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog">
      <el-dialog
          :title="mode===1?'新增':'编辑'"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
          >


        <el-form ref="form" :model="form" label-width="80px" >
          <el-form-item label="公司名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="照片">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8080/company/upload"
                :show-file-list="false"
                :on-success="onSuccess"
                name="multipartFile"
                >
              <img v-if="form.picture" :src="form.picture" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>


          <el-form-item label="地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.telephone"></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input v-model="form.simplyintroduce"></el-input>
          </el-form-item>
          <el-form-item label="邮件">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="二维码">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8080/company/upload"
                :show-file-list="false"
                :on-success="onSuccess2"
                name="multipartFile"
            >
              <img v-if="form.twopicture" :src="form.twopicture" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

        </el-form>


        <span slot="footer" class="dialog-footer">
    <el-button @click="cancelDialog">取 消</el-button>
    <el-button type="primary" @click="confirmDialog">确 定</el-button>
  </span>
      </el-dialog>
    </div>
    <div class="page">
      <el-pagination
          :page-size="page.pageSize"
          :current-page="page.currentPage"
          background
          layout="prev, pager, next"
          :total="page.total"
          @current-change="currentChange"
          @prev-click="preClick"
          @next-click="nextClick"
      >
      </el-pagination>
    </div>

  </div>
</template>

<style scoped>
.container{
  text-align: center;
}
.search{
  width: 400px;
  display: flex;
}
.header{
  display: flex;
}
.insert{
  margin-left: 900px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}
.avatar {
  width: 130px;
  height: 130px;
  display: block;
}
</style>